<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>列表</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/weui.css" />
    <link rel="stylesheet" href="css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/weui.js"></script>
    <script src="js/common.js"></script>
</head>

<body ontouchstart>
    <div class="page" id="home">
        <div class="weui-search-bar weui-search-bar_outlined" id="searchBar">
            <form id="searchForm" role="combobox" aria-haspopup="true" aria-expanded="false" aria-owns="searchResult"
                class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <input type="search" aria-controls="searchResult" class="weui-search-bar__input" id="searchInput"
                        placeholder="搜索" required="">
                    <div class="weui-search-bar__mask"></div>
                    <a href="javascript:" role="button" title="清除" class="weui-icon-clear" id="searchClear"></a>
                </div>
            </form>
            <a href="javascript:" class="weui-search-bar__search-btn weui-btn weui-btn_primary" id="searchBtn">搜索</a>
            <a href="javascript:" class="weui-search-bar__cancel-btn iconfont icon-shaixuan" onclick="showFilter()"></a>
            <a href="form.html" class="weui-search-bar__cancel-btn iconfont icon-add"></a>
        </div>
        <div class="viewScrollBox" onscroll="viewsScroll(this)">
            <div class="viewListBox">
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题二</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题二</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题二</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题二</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题二</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="detail.html" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题二</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
            </div>
            <div class="footLoad">
                <i role="img" aria-label="正在加载" class="weui-mask-loading"></i><span>加载中...</span>
            </div>
            <div class="weui-footer">
                <p class="weui-footer__text">底部公司信息</p>
            </div>
        </div>

    </div>
    <div id="filterBox" class="filterBox weui-bottom-fixed-opr-page weui-flex weui-flex__dir-row">
        <div class="left" onclick="hideFilter()"></div>
        <div class="filterFormBox weui-flex weui-flex__dir-col weui-bottom-fixed-opr-page__tool">
            <div class="weui-flex__item filterFormContainer weui-form">
                <div class="weui-cells">
                    <label class="weui-cell weui-flex__dir-col">
                        <span class="weui-label">姓名</span>
                        <input class="weui-input" placeholder="请输入姓名" value="" />
                    </label>
                    <label class="weui-cell weui-flex__dir-col">
                        <span class="weui-label">选则时间</span>
                        <input class="weui-input" placeholder="请选择时间" value="" id="showDatePicker" />
                    </label>
                    <label class="weui-cell weui-flex__dir-col">
                        <span class="weui-label">状态</span>
                        <input class="weui-input" placeholder="请选择状态" value="" id="showPicker" />
                    </label>
                </div>
            </div>
            <div class="filterBtnBox weui-bottom-fixed-opr">
                <a href="javascript:;" role="button" class="weui-btn weui-btn_default" onclick="hideFilter()">取消</a>
                <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn"><span
                        class="weui-btn__inner">确认</span></a>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $('#showPicker').on('click', function () {
            weui.picker([{
                label: '飞机票',
                value: 0
            }, {
                label: '火车票',
                value: 1
            }, {
                label: '的士票',
                value: 2
            }, {
                label: '公交票 (disabled)',
                value: 3
            }, {
                label: '其他',
                value: 4
            }], {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result);
                    $("#showPicker").val(result[0].label)
                },
                title: '单列选择器'
            });
        });
        $('#showDatePicker').on('click', function () {
            weui.datePicker({
                start: 1990,
                end: new Date().getFullYear(),
                onChange: function (result) {
                    console.log(result);

                },
                onConfirm: function (result) {
                    console.log(result);
                    let time = ''
                    result.filter(v => {
                        time += v.label
                    })
                    $('#showDatePicker').val(time)
                },
                title: '请选择时间'
            });
        });
    });
    function showFilter() {
        $("#filterBox").toggleClass('showView');
    }
    function hideFilter() {
        $("#filterBox").toggleClass('showView');
    }
    function loadMore(flag) {
        if (flag) {
            $(".footLoad").fadeIn();
        } else {
            $(".footLoad").fadeOut();
        }
    }
    function viewsScroll(e) {
        var scrollTop = $(e).scrollTop();
        var scrollHeight = $(e)[0].scrollHeight;
        var clientHeight = $(e)[0].clientHeight;
        var scrollBottom = scrollHeight - scrollTop - clientHeight;
        if (scrollBottom < 50) {
            console.log('到底了')
            loadMore(true);
            getData();
        }
    }
    function getData() {
        var html = `<a aria-labelledby="js_p1m1_bd" href="javascript:" class="weui-media-box weui-media-box_appmsg">
                    <div aria-hidden="true" class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="./images/img1.png" alt="">
                    </div>
                    <div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
                        <strong class="weui-media-box__title">标题一</strong>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>`;
        for (let i = 0; i < 10; i++) {
            $(".viewListBox").append(html)
        }
        setTimeout(() => {
            loadMore(false);
        }, 3000);
    }
</script>

</html>